<template>
	<view>
		<van-tabs :active="active" sticky swipeable animated color="#000000" @click="switchoverState" @change="switchoverState">
			<van-tab title="全部">
				<view class="order-box" v-for="(item,index) in orderList" :key="index" @click="routerJump(`my_order_info?orderId=${item.orderId}`)">
					<view class="row row-between-wrapper bottom-line order-title">
						<view class="row row-middle">
							<image src="../../static/img/my_order/my_order_icon.png" class="icon"></image>
							<text>商品订单</text>
						</view>
						<view class="icon-color" v-if="item.status === 1">待付款</view>
						<view v-else-if="item.status === 2 || item.status === 3">已付款</view>
						<view v-else-if="item.status === 4">已发货</view>
						<view v-else-if="item.status === 5">已完成</view>
						<view v-else-if="item.status === 6">已关闭</view>
						<view class="icon-color" v-else-if="item.status === 7">退款中</view>
						<view class="num-color" v-else-if="item.status === 8">退款完成</view>
					</view>
					<view class="row row-middle bottom-line goods-info-box" v-for="(item2,index2) in item.shoppingDetails" :key="index2">
						<image :src="item2.goodsSku.image"></image>
						<view class="goods-info-right">
							<view class="line2 goods-item1">{{item2.goodsName}}</view>
							<view class="line1 goods-item2">{{item2.goodsSku.skuName}}</view>
							<view class="row row-between-wrapper goods-item3">
								<text class="icon-color">￥{{item2.goodsSkuPrice}}</text>
								<text class="num-color">×{{item2.goodsSkuNum}}</text>
							</view>
						</view>
					</view>
					<view class="count-box order-title">共{{item.totalNum}}件商品  合计：<text>￥{{item.totalAmount}}</text></view>
					<view class="row row-middle row-right show-button-box" v-if="item.status === 5 && !item.shoppingComment && !item.activity" @click.stop="routerJump('my_order_evaluate')">
						<view class="show-button">评价订单</view>
					</view>
					<view class="row row-middle row-right show-button-box" v-if="item.status === 4">
						<view class="show-button">查看物流</view>
					</view>
					<view class="row row-middle row-right show-button-box" v-if="item.status === 4 && item.orderType === 2">
						<view class="show-button">确认收货</view>
					</view>
					<view class="row row-middle row-right show-button-box" v-if="item.status === 2 && item.orderType === 3 && item.card.status === 0 && !item.activity">
						<view class="show-button">申请退款</view>
					</view>
				</view>
			</van-tab>
			<van-tab title="待付款">
				<view class="order-box" v-for="(item,index) in orderList" :key="index" @click="routerJump(`my_order_info?orderId=${item.orderId}`)">
					<view class="row row-between-wrapper bottom-line order-title">
						<view class="row row-middle">
							<image src="../../static/img/my_order/my_order_icon.png" class="icon"></image>
							<text>商品订单</text>
						</view>
						<view class="icon-color" v-if="item.status === 1">待付款</view>
						<view v-else-if="item.status === 2 || item.status === 3">已付款</view>
						<view v-else-if="item.status === 4">已发货</view>
						<view v-else-if="item.status === 5">已完成</view>
						<view v-else-if="item.status === 6">已关闭</view>
						<view class="icon-color" v-else-if="item.status === 7">退款中</view>
						<view class="num-color" v-else-if="item.status === 8">退款完成</view>
					</view>
					<view class="row row-middle bottom-line goods-info-box" v-for="(item2,index2) in item.shoppingDetails" :key="index2">
						<image :src="item2.goodsSku.image"></image>
						<view class="goods-info-right">
							<view class="line2 goods-item1">{{item2.goodsName}}</view>
							<view class="line1 goods-item2">{{item2.goodsSku.skuName}}</view>
							<view class="row row-between-wrapper goods-item3">
								<text class="icon-color">￥{{item2.goodsSkuPrice}}</text>
								<text class="num-color">×{{item2.goodsSkuNum}}</text>
							</view>
						</view>
					</view>
					<view class="count-box order-title">共{{item.totalNum}}件商品  合计：<text>￥{{item.totalAmount}}</text></view>
					<view class="row row-middle row-right show-button-box" v-if="item.status === 5 && !item.shoppingComment && !item.activity" @click.stop="routerJump('my_order_evaluate')">
						<view class="show-button">评价订单</view>
					</view>
					<view class="row row-middle row-right show-button-box" v-if="item.status === 4">
						<view class="show-button">查看物流</view>
					</view>
					<view class="row row-middle row-right show-button-box" v-if="item.status === 4 && item.orderType === 2">
						<view class="show-button">确认收货</view>
					</view>
					<view class="row row-middle row-right show-button-box" v-if="item.status === 2 && item.orderType === 3 && item.card.status === 0 && !item.activity">
						<view class="show-button">申请退款</view>
					</view>
				</view>
			</van-tab>
			<van-tab title="待发货">
				<view class="order-box" v-for="(item,index) in orderList" :key="index" @click="routerJump(`my_order_info?orderId=${item.orderId}`)">
					<view class="row row-between-wrapper bottom-line order-title">
						<view class="row row-middle">
							<image src="../../static/img/my_order/my_order_icon.png" class="icon"></image>
							<text>商品订单</text>
						</view>
						<view class="icon-color" v-if="item.status === 1">待付款</view>
						<view v-else-if="item.status === 2 || item.status === 3">已付款</view>
						<view v-else-if="item.status === 4">已发货</view>
						<view v-else-if="item.status === 5">已完成</view>
						<view v-else-if="item.status === 6">已关闭</view>
						<view class="icon-color" v-else-if="item.status === 7">退款中</view>
						<view class="num-color" v-else-if="item.status === 8">退款完成</view>
					</view>
					<view class="row row-middle bottom-line goods-info-box" v-for="(item2,index2) in item.shoppingDetails" :key="index2">
						<image :src="item2.goodsSku.image"></image>
						<view class="goods-info-right">
							<view class="line2 goods-item1">{{item2.goodsName}}</view>
							<view class="line1 goods-item2">{{item2.goodsSku.skuName}}</view>
							<view class="row row-between-wrapper goods-item3">
								<text class="icon-color">￥{{item2.goodsSkuPrice}}</text>
								<text class="num-color">×{{item2.goodsSkuNum}}</text>
							</view>
						</view>
					</view>
					<view class="count-box order-title">共{{item.totalNum}}件商品  合计：<text>￥{{item.totalAmount}}</text></view>
					<view class="row row-middle row-right show-button-box" v-if="item.status === 5 && !item.shoppingComment && !item.activity" @click.stop="routerJump('my_order_evaluate')">
						<view class="show-button">评价订单</view>
					</view>
					<view class="row row-middle row-right show-button-box" v-if="item.status === 4">
						<view class="show-button">查看物流</view>
					</view>
					<view class="row row-middle row-right show-button-box" v-if="item.status === 4 && item.orderType === 2">
						<view class="show-button">确认收货</view>
					</view>
					<view class="row row-middle row-right show-button-box" v-if="item.status === 2 && item.orderType === 3 && item.card.status === 0 && !item.activity">
						<view class="show-button">申请退款</view>
					</view>
				</view>
			</van-tab>
			<van-tab title="已发货">
				<view class="order-box" v-for="(item,index) in orderList" :key="index" @click="routerJump(`my_order_info?orderId=${item.orderId}`)">
					<view class="row row-between-wrapper bottom-line order-title">
						<view class="row row-middle">
							<image src="../../static/img/my_order/my_order_icon.png" class="icon"></image>
							<text>商品订单</text>
						</view>
						<view class="icon-color" v-if="item.status === 1">待付款</view>
						<view v-else-if="item.status === 2 || item.status === 3">已付款</view>
						<view v-else-if="item.status === 4">已发货</view>
						<view v-else-if="item.status === 5">已完成</view>
						<view v-else-if="item.status === 6">已关闭</view>
						<view class="icon-color" v-else-if="item.status === 7">退款中</view>
						<view class="num-color" v-else-if="item.status === 8">退款完成</view>
					</view>
					<view class="row row-middle bottom-line goods-info-box" v-for="(item2,index2) in item.shoppingDetails" :key="index2">
						<image :src="item2.goodsSku.image"></image>
						<view class="goods-info-right">
							<view class="line2 goods-item1">{{item2.goodsName}}</view>
							<view class="line1 goods-item2">{{item2.goodsSku.skuName}}</view>
							<view class="row row-between-wrapper goods-item3">
								<text class="icon-color">￥{{item2.goodsSkuPrice}}</text>
								<text class="num-color">×{{item2.goodsSkuNum}}</text>
							</view>
						</view>
					</view>
					<view class="count-box order-title">共{{item.totalNum}}件商品  合计：<text>￥{{item.totalAmount}}</text></view>
					<view class="row row-middle row-right show-button-box" v-if="item.status === 5 && !item.shoppingComment && !item.activity" @click.stop="routerJump('my_order_evaluate')">
						<view class="show-button">评价订单</view>
					</view>
					<view class="row row-middle row-right show-button-box" v-if="item.status === 4">
						<view class="show-button">查看物流</view>
					</view>
					<view class="row row-middle row-right show-button-box" v-if="item.status === 4 && item.orderType === 2">
						<view class="show-button">确认收货</view>
					</view>
					<view class="row row-middle row-right show-button-box" v-if="item.status === 2 && item.orderType === 3 && item.card.status === 0 && !item.activity">
						<view class="show-button">申请退款</view>
					</view>
				</view>
			</van-tab>
		</van-tabs>
	</view>
</template>

<script>
import http from '../../api/api.js';
import imgUrl from '../../static/js/config.js';
export default {
	data: function() {
		return {
			userId:uni.getStorageSync('userId'),
			active: 0,
			status:'',
			orderList:[],
			flag:false,
			pageNo:1
		};
	},
	onReachBottom(){
		if(this.flag) {
			this.pageNo++;
			this.init({pageNo:this.pageNo,userId:this.userId,status:this.status})
		}
	},
	onLoad(option){
		if(option.status){
			let status = ['1,2,3,4,5,6,7,8','1','2,3','4'];
			this.active = status.indexOf(option.status);
			this.status = status[this.active];
			this.init({pageNo:1,userId:this.userId,status:this.status});
		}
	},
	methods: {
		init(data){
			http.getOrderList(data).then(res => {
				if(res.data.code === 1) {
					let len = res.data.data.length;
					if(len < 10) {
						this.flag = false
					}else{
						this.flag = true
					}
					this.orderList.push.apply(this.orderList,res.data.data);
					this.orderList.forEach((item) => {
						item.shoppingDetails.forEach(item2 => {
							item2.goodsSku.image = `${imgUrl.IMG_URL + item2.goodsSku.image}`
						})
					})
				}
			})
		},
		switchoverState(e) {
			this.orderList = [];
			let status = ['1,2,3,4,5,6,7,8','1','2,3','4'];
			this.status = status[e.target.index]
			this.init({pageNo:1,userId:this.userId,status:this.status});
		},
		routerJump(routerName) {
			uni.navigateTo({
				url: routerName
			});
		}
	}
};
</script>

<style lang="scss" scoped>
@import '../../common/mixins';
.order-box {
	@include box;
}
.order-title{
	height: 100upx;
}
.goods-info-box{
	height: 260upx;
	>image{
		width: 150upx;
		height: 150upx;
		display: block;
		border: 1upx solid #E3E3E3;
		box-shadow: 0 0 2upx #E3E3E3;
	}
}
.goods-info-right{
	margin-left: 20upx;
	width: calc(100% - 172upx);
}
.goods-item1{
	height: 100upx;
	font-weight: 600;
}
.goods-item2{
	height: 50upx;
}
.goods-item3{
	height: 50upx;
}
.icon {
	width: 44upx;
	height: 44upx;
	& + text {
		margin-left: 20upx;
	}
}
.count-box{
	text-align: right;
	line-height: 100upx;
	:last-child{
		font-size: 30upx;
	}
}
.num-color{
	color: #ADADAD;
}
.show-button-box{
	height: 100upx;
}
.show-button{
	padding: 8upx 30upx;
	border: 1upx solid #000000;
	border-radius: 30upx;
}
</style>
